*{ Display a post in one of these modes: 'full', 'home', 'thumbnail' or 'teaser' }*
 
#{if _as == 'full'}
	<script type="text/javascript">
		var hashDelimiter = '|';
		var hashTag = '';
		
		hs.graphicsDir = "@{'/public/highslide/graphics/'}/";
		hs.align = 'center';
		hs.transitions = ['expand', 'crossfade'];
		hs.outlineType = 'rounded-white';
		hs.fadeInOut = true;
		hs.numberPosition = 'caption';
		hs.dimmingOpacity = 0.9;
		hs.showCredits = false;
		// Add the controlbar
		if (hs.addSlideshow) hs.addSlideshow({
			//slideshowGroup: 'group1',
			interval: 5000,
			repeat: false,
			useControls: true,
			fixedControls: 'fit',
			overlayOptions: {
				opacity: .6,
				position: 'bottom center',
				hideOnMouseOut: true
			}
		});
		// -- Change hash management
		hs.Expander.prototype.onAfterExpand = function() {
			console.log("onAfterExpand");
		}
		
		hs.extend (hs.Expander.prototype, {
			onAfterExpand: function(sender) {
				console.log("onAfterExpand");
				hashTag = $(this.a).attr("id");
				window.location.hash = hashDelimiter + hashTag;
			},
			onBeforeClose: function(sender) {
				console.log("onAfterClose");
				window.location.hash = '';
			}
		});
		$(document).ready(function() {
			// Open the requested image after the page loads
			var hashParts = window.location.hash.split(hashDelimiter);
			if (hashParts[1]) {
				// Security check if the object with the requested id resides in "post-images".
				if ($('#' + hashParts[1]).closest('div.post-images')) {
					$('#' + hashParts[1]).click();
				}
			}
		});
		$(window).hashchange(function() {
			var hashParts = window.location.hash.split(hashDelimiter);		
			// If the new hash is not equal to the hash we store internally,
			// then it must be the user hitting the "back/forward" button
			// VD : Why this is useful ?
			if (hashParts[1] != hashTag) {
				hs.close();
				window.location.hash = '';
			}
		});
	</script>
#{/if}

#{if _as == 'thumbnail'}
	<a href="@{Application.show(_post.id)}" style="text-decoration: none;">
		<div class="post thumbnail">
			<div class="post-image">
				#{if _post.mainImage}
					<img src="${_post.mainImage.getUrl('/crop/266')}" alt="${_post.mainImage.title}" height="246" width="246" />
				#{/if}
			</div>
	        <div class="post-metadata">
	        	<div class="post-title">${_post.title}</div>
	        	<div class="post-date">${_post.postedAt.format('dd MMMM yyyy')}</div>
        	</div>
		</div>
	</a>
#{/if}
#{else}
 
	<div class="post ${_as == 'teaser' ? 'teaser' : ''}">
		<table width="100%">
			<tr>
				<td>
					<h2 class="post-title">
				        <a href="@{Application.show(_post.id)}">${_post.title}</a>
				    </h2>
				</td>
				<td valign="bottom">
					<div class="post-metadata">
				        *{<span class="post-author">by ${_post.author.fullname}</span>,}*
				        écrit le <span class="post-date">${_post.postedAt.format('dd MMMM yyyy')}</span>
				        #{if user}
				        	<a href="@{Admin.form(_post.id)}">&nbsp;-&nbsp;Edit</a>
				        #{/if}
				    </div>
				</td>
			</tr>
		</table>
	    
	    #{if _as != 'teaser'}
	   		<div class="post-content">    
	            <div class="about">&npsp;</div>
	            <div class="post-inner">
	            	<div class="post-text">${_post.content.nl2br()}</div>
		            #{if _as == 'full'}
				    	<div class="post-images highslide-gallery">
				    		#{list items:_post.images, as:'image'}
				    			<div class="pola">
					    			<a href="${image.getUrl('/resize-if-bigger/1600')}" class="highslide" onclick="return hs.expand(this)" id="${image.id}">
										<img src="${image.getUrl('/crop/102')}" alt="${image.title}" title="Click it to enlarge" height="102" width="102" />
									</a>
									<div class="highslide-caption">
										${image.title}
									</div>
								</div>
				            #{/list}
				            <div style="clear:both"></div>
				    	</div>
				    #{/if}
				    
	            </div>
	        </div>
	    #{/if}
	    <div style="clear: both"></div>
	</div>
#{/else}
 
#{if _as == 'full'}
    
#{/if}